<template>
  <el-container style="height: 600px">
    <el-aside width="400px">
      <div class="info-wrapper" style="background-color: #fff">
        <div class="info-title">个人资料</div>
        <div class="info-content">
          <div class="info-portrait">
            <UserAvatar />
          </div>
          <div
            class="user-row"
            v-for="(item, index) in personalInfo"
            :key="index"
          >
            <div class="user-row-left">
              <span :class="item.icon">{{ item.name }}</span>
            </div>
            <div class="user-row-right">
              <span>{{ item.value ? item.value : "--" }}</span>
            </div>
          </div>
        </div>
      </div>
    </el-aside>
    <el-main style="padding: 0">
      <div
        class="edit-wapper"
        style="background-color: #fff; display: flex; flex-direction: column"
      >
        <div class="info-title">基本资料</div>
        <EditUserInfo
          ref="editUserInfoRef"
          style="height: 100%"
          :userInfo="userInfo"
        ></EditUserInfo>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import UserAvatar from "./UserAvatar.vue";
import EditUserInfo from "@/views/system/user/profile/EditUserInfo.vue";
import EditPaaword from "@/views/system/user/profile/EditPaaword.vue";
import { getNotice } from "@/api/system/user.js";

export default {
  name: "PersonalInfo",
  components: { EditUserInfo, EditPaaword, UserAvatar },
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      activeName: "editInfo",
      userInfo: {},
      personalInfo: [],
    };
  },
  created() {
    // 获取用户信息
    getNotice(this.$store.getters.userId).then((res) => {
      this.userInfo = res.data.user;
      // 渲染到基本资料上
      this.init();
      // 渲染子组件
      this.initUserInfo(res.data.user);
    });
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    initUserInfo(userInfo) {
      this.$refs.editUserInfoRef.init(userInfo);
    },
    init() {
      this.personalInfo = [];
      this.personalInfo.push({
        icon: "el-icon-user",
        name: "用户名称",
        value: this.userInfo.userName,
      });
      this.personalInfo.push({
        icon: "el-icon-mobile-phone",
        name: "手机号码",
        value: this.userInfo.phonenumber,
      });
      this.personalInfo.push({
        icon: "el-icon-message",
        name: "用户邮箱",
        value: this.userInfo.email,
      });
      this.personalInfo.push({
        icon: "el-icon-office-building",
        name: "所属部门",
        value: "--",
      });
      this.personalInfo.push({
        icon: "el-icon-s-custom",
        name: "所属角色",
        value: "--",
      });
      this.personalInfo.push({
        icon: "el-icon-date",
        name: "入职时间",
        value: this.userInfo.dateOfHire,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-upload {
  position: relative;
  border-radius: 50%;

  i.el-icon-plus::before {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
  }
}

.info-title {
  line-height: 40px;
  background-color: #f0f3f4;
  padding-left: 20px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}

.edit-wapper {
  border: 1px solid #ccc;
  margin-left: 10px;
  height: 600px;
}

.info-wrapper {
  border: 1px solid #ccc;
  padding-bottom: 40px;
  height: 600px;

  .info-content {
    padding: 0 20px;
    display: relative;

    .info-portrait {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-direction: column;
      padding-top: 30px;

      .text {
        font-size: 13px;
        line-height: 40px;
        color: #43a4d9;
      }
    }
    .user-row {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      position: relative;
      height: 50px;
      font-size: 14px;

      .user-row-left {
        position: relative;
        width: 300px;

        span {
          position: absolute;
          bottom: 8px;
        }
      }

      .user-row-right {
        position: relative;
        text-align: right;
        width: 300px;

        span {
          position: absolute;
          bottom: 8px;
          right: 0;
        }
      }
    }
  }
}
</style>